<template>
    <div>
        已选省份id{{selectedProvinceIds}}
        <baidu-map :center="map.center" :zoom="map.zoom" @ready="mapReady" :scroll-wheel-zoom="false" class="bm-view">
            <bm-label :labelStyle="{color:'#fff',borderColor:'#B1DBF6',backgroundColor:province.selected?'#4080BD':'#172049'}"  v-for="province in provinces"@click="selectProvince(province.id)" :content="province.name+'('+province.count+')'" :position="province.position"></bm-label>
        </baidu-map>
    </div>
</template>

<script>

    import {BaiduMap} from 'vue-baidu-map'
    import {exam} from '../../../../../api/index.js';
    import _ from "lodash";

    export default {
        components: {
        },
        data() {
            // 插入 10 个随机点
            const markers = []
            // exam.getSchoolAllList_get().then((res) => {
            //     console.info(res);
            //     for (var i = 0; i < 100; i++) {
            //         const position = {lng: res.data.data.list[i].lng, lat: res.data.data.list[i].lat}
            //         markers.push(position)
            //     }
            // }, function (error) {
            //     alert("系统异常，请先联系管理员");
            // });
            return {
                map: {
                    center: {lng: 105.403119, lat: 38.028658},
                    zoom: 5,
                    markers: markers,
                },
                provinces: [{//TODO 获取服务端省份数据
                    "name": "黑龙江省", "id": "1", "count": 15, position: {lng: 126, lat: 48}
                }, {
                    "name": "吉林省",
                    "id": "2",
                    "count": 15,
                    position: {lng: 124, lat: 44}
                }],
                selectedProvinceIds: [],//已选省份id
            };
        },
        methods: {
            selectProvince(provinceId) {
                var p  = _.find(this.provinces,{id:provinceId});
                p.selected = !p.selected;
                var selectedProvinces = _.filter(this.provinces,{"selected":true});
                this.selectedProvinceIds = _.map(selectedProvinces,'id');
            },
            mapReady({BMap, map}) {
                var _this = this;
                setTimeout(function () {
                    _this.provinces[0].count=333
                },3000);//模拟动态修改数据,更新地图
                map.setMapStyle(
                    {
                        styleJson: [
                            {
                                "featureType": "water",
                                "elementType": "all",
                                "stylers": {
                                    "color": "#021019"
                                }
                            },
                            {
                                "featureType": "highway",
                                "elementType": "geometry.fill",
                                "stylers": {
                                    "color": "#000000"
                                }
                            },
                            {
                                "featureType": "highway",
                                "elementType": "geometry.stroke",
                                "stylers": {
                                    "color": "#147a92"
                                }
                            },
                            {
                                "featureType": "arterial",
                                "elementType": "geometry.fill",
                                "stylers": {
                                    "color": "#000000"
                                }
                            },
                            {
                                "featureType": "arterial",
                                "elementType": "geometry.stroke",
                                "stylers": {
                                    "color": "#0b3d51"
                                }
                            },
                            {
                                "featureType": "local",
                                "elementType": "geometry",
                                "stylers": {
                                    "color": "#000000"
                                }
                            },
                            {
                                "featureType": "land",
                                "elementType": "all",
                                "stylers": {
                                    "color": "#172049"
                                }
                            },
                            {
                                "featureType": "railway",
                                "elementType": "geometry.fill",
                                "stylers": {
                                    "color": "#000000"
                                }
                            },
                            {
                                "featureType": "railway",
                                "elementType": "geometry.stroke",
                                "stylers": {
                                    "color": "#08304b"
                                }
                            },
                            {
                                "featureType": "subway",
                                "elementType": "geometry",
                                "stylers": {
                                    "lightness": -70
                                }
                            },
                            {
                                "featureType": "building",
                                "elementType": "geometry.fill",
                                "stylers": {
                                    "color": "#000000"
                                }
                            },
                            {
                                "featureType": "all",
                                "elementType": "labels.text.fill",
                                "stylers": {
                                    "color": "#857f7f"
                                }
                            },
                            {
                                "featureType": "all",
                                "elementType": "labels.text.stroke",
                                "stylers": {
                                    "color": "#000000"
                                }
                            },
                            {
                                "featureType": "building",
                                "elementType": "geometry",
                                "stylers": {
                                    "color": "#022338"
                                }
                            },
                            {
                                "featureType": "green",
                                "elementType": "geometry",
                                "stylers": {
                                    "color": "#062032"
                                }
                            },
                            {
                                "featureType": "boundary",
                                "elementType": "all",
                                "stylers": {
                                    "color": "#2da0c6ff"
                                }
                            },
                            {
                                "featureType": "manmade",
                                "elementType": "geometry",
                                "stylers": {
                                    "color": "#022338"
                                }
                            },
                            {
                                "featureType": "poi",
                                "elementType": "all",
                                "stylers": {
                                    "visibility": "off"
                                }
                            },
                            {
                                "featureType": "all",
                                "elementType": "labels.icon",
                                "stylers": {
                                    "visibility": "off"
                                }
                            },
                            {
                                "featureType": "all",
                                "elementType": "labels.text.fill",
                                "stylers": {
                                    "color": "#2da0c6",
                                    "visibility": "on"
                                }
                            }
                        ]
                    });
            }
        },
    };
</script>
<style>

    .bm-view {
        width: 100%;
        height: 534px;
    }

</style>